<template>
	<view class="wrap">
		<view class="wrap-top">
			<TopContent />
		</view>
		<view class="wrap-content">
			<scroll-view class="scroll-wrap" scroll-y>
				<!-- 账号管理 -->
				<Account @click="accountClick" />
			</scroll-view>
			<!-- 商家管理 -->
			<Manage :list="manageList" title="商家管理" @click="clickFn" />
			<!-- 功能服务 -->
			<Manage :list="serviceList" title="功能服务" @click="clickFn" />
		</view>
		<!-- tabbar -->
		<!-- <tabbarList /> -->
		
		<!-- 发布通告 -->
		<u-popup v-model="announceShow" mode="center" width="500" height="520" :border-radius="10">
			<view class="wrap-announce u-padding-40">
				<view class="item u-flex" v-for="(item,index) in announceList" :key="index" @click="announce(item.id)">
					<u-image width="70rpx" height="70rpx" :src="item.image_url"></u-image>
					<view class="u-p-l-30">{{item.name}}</view>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 进群通告 -->
		<u-popup v-model="show" mode="center" width="600" height="720" :border-radius="10">
			<view class="wrap-shop u-padding-40">
				<view class="title u-text-center u-margin-bottom-20">商家咨询、商家审核认证</view>
				<view class="u-text-center">请添加客服专员微信: xxXXXXXXXx</view>
				<view class="u-flex u-row-center u-margin-top-40 u-margin-bottom-40">
					<u-image width="400rpx" height="400rpx" :src="avatarUrl"></u-image>
				</view>
				<view class="u-flex u-row-between ">
					<u-button type="info" shape="circle" hover-class="none" :ripple="true">下载二维码</u-button>
					<u-button type="warning" shape="circle" class="send" hover-class="none" :ripple="true">复制微信号</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 进群通告 -->
		<u-popup v-model="groupShow" mode="center" width="600" height="720" :border-radius="10">
			<view class="wrap-shop u-padding-40">
				<view class="title u-text-center u-margin-bottom-20">千晨文化通告群</view>
				<view class="u-text-center">请添加客服专员微信:Amy8868</view>
				<view class="u-flex u-row-center u-margin-top-40 u-margin-bottom-40">
					<u-image width="400rpx" height="400rpx" :src="avatarUrl"></u-image>
				</view>
				<view class="u-flex u-row-between ">
					<u-button  type="info" shape="circle" hover-class="none" :ripple="true">下载二维码</u-button>
					<u-button type="warning" shape="circle" class="send" hover-class="none" :ripple="true">复制微信号</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 关于千晨 -->
		<u-popup v-model="aboutShow" mode="center" width="600" height="680" :border-radius="10">
			<view class="wrap-shop u-padding-40">
				<view class="title u-text-center u-margin-bottom-20">关注千晨文化公众号</view>
				<view class="u-flex u-row-center u-margin-top-40 u-margin-bottom-40">
					<u-image width="400rpx" height="400rpx" :src="avatarUrl"></u-image>
				</view>
				<view class="u-flex u-row-between ">
					<u-button type="info" shape="circle" hover-class="none" :ripple="true">下载二维码</u-button>
					<u-button type="warning" shape="circle" class="send" hover-class="none" :ripple="true">复制微信号</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
// import tabbarList from '@/components/tabbar-list/index.vue'
import TopContent from './components/top-content.vue'
import Account from './components/account.vue'
import Manage from './components/manage.vue'
export default {
	components: {
		// tabbarList
		TopContent,
		Account,
		Manage
	},
	data() {
		return {
			scrollHeight: 0,
			show: false,
			aboutShow:false,
			announceShow:false,
			groupShow:false,
			avatarUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.sinaimg.cn%2Fbmiddle%2F4a20d21ct6272f6f34780&refer=http%3A%2F%2Fs1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617766987&t=e4e11e1632b5d0f6aea175f6d8b13159',
			announceList:[
				{
					id: 1,
					name: '发布抖音通告',
					image_url: require('@/static/icons/21@2x.png')
				},
				{
					id: 1,
					name: '发布快手通告',
					image_url: require('@/static/icons/22@2x.png')
				},
				{
					id: 1,
					name: '发布微博通告',
					image_url: require('@/static/icons/23@2x.png')
				},
				{
					id: 1,
					name: '发布哔哩哔哩通告',
					image_url: require('@/static/icons/23@2x.png')
				},
				{
					id: 1,
					name: '发布大众点评通告',
					image_url: require('@/static/icons/ddddddddd.png')
				}
			],
			manageList: [
				{
					id: 1,
					name: '发布通知',
					image_url: require('@/static/icons/fabutongzhi_icon.png')
				},
				{
					id: 2,
					name: '通告管理',
					image_url: require('@/static/icons/tonggaoguanli_icon.png'),
					link:'/pages/mine/announce/announceAdmin'
				},
				{
					id: 3,
					name: '发布商品',
					image_url: require('@/static/icons/tonggaoguanli_icon.png'),
					link:'/pages/mine/releaseShop/releaseShop'
				},
				{
					id: 4,
					name: '商品管理',
					image_url: require('@/static/icons/tonggaoguanli_icon.png'),
					link:'/pages/mine/shopAdmin/shopAdmin'
				},
				{
					id: 5,
					name: '领样管理',
					image_url: require('@/static/icons/tonggaoguanli_icon.png'),
					link:'/pages/mine/sample/sample'
				},
				{
					id: 6,
					name: '我的达人',
					image_url: require('@/static/icons/shangjiaruzhu_icon.png'),
					link:'/pages/mine/talent/talent'
				},
				{
					id: 7,
					name: '商家入驻',
					image_url: require('@/static/icons/shangjiaruzhu_icon.png'),
					link:'/pages/mine/business/business'
				},
				{
					id: 8,
					name: '商家咨询',
					image_url: require('@/static/icons/shangjiazixun_icon.png'),
				}
			],
			serviceList: [
				{
					id: 9,
					name: '我的钱包',
					image_url: require('@/static/icons/shangjiazixun_icon.png')
				},
				{
					id: 10,
					name: '我的收藏',
					image_url: require('@/static/icons/shangjiazixun_icon.png'),
					link:'/pages/mine/collection/collection'
				},
				{
					id: 11,
					name: '进群通告',
					image_url: require('@/static/icons/tonggaoqun_icon.png')
				},
				{
					id: 12,
					name: '新手指南',
					image_url: require('@/static/icons/tonggaoqun_icon.png')
				},
				{
					id: 13,
					name: '收货地址',
					image_url: require('@/static/icons/dizhi_icon.png'),
					link:'/pages/mine/address/address'
				},
				{
					id: 14,
					name: '联系客服',
					image_url: require('@/static/icons/kefu_icon.png')
				},
				{
					id: 15,
					name: '意见反馈',
					image_url: require('@/static/icons/kefu_icon.png'),
					link:'/pages/mine/feedback/feedback'
				},
				{
					id: 16,
					name: '关于千晨',
					image_url: require('@/static/icons/guanyu_icon.png'),
					link:'/pages/mine/about/about'
				}
			]
		};
	},
	onLoad() {
		// let info = uni.createSelectorQuery().select(".wrap-content")
		// info.boundingClientRect((data) => {
		// 	console.log(data.height)
		// 	this.scrollHeight = data.height
		// }).exec()
	},
	methods:{
		accountClick(e){
			uni.navigateTo({
				url: '/pages/mine/account/account',
			})
		},
		clickFn(e){
			let that = this;
			let {id,link} = e.item;
			console.log(link)
			switch(id) {
				case 1:
					that.announceShow = true;
					break;
			    case 8:
					that.show = true;
			        break;
				case 14:
					that.aboutShow = true;
				    break;
				case 11:
					that.groupShow = true;
				    break;
			    default:
			        uni.navigateTo({
			        	url: link,
					})	
			} 
		},
		announce(id){
			uni.navigateTo({
				url: '/pages/mine/announce/announce?id='+id,
			})
		}
		
		
		
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss">
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	.wrap-announce{
		.item{
			margin-bottom: 10rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #eee;
		}
		.item:nth-last-child(1){
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}
	&-top {
		margin-bottom: 12rpx;
	}
	&-content {
		flex: 1;
		height: 100%;
		padding-bottom: 100rpx;
		.scroll-wrap {
		}
	}
	.send{background-color: #DE4F38;}
}
</style>
